<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <!-- 1 -->
        <el-card>
          <Detail count="12356" title="总销售额">
            <template slot="charts">
              <span>周同比&nbsp;&nbsp;56.45% <i style="color:red" class="el-icon-caret-top" /> </span>
              <span>日同比&nbsp;&nbsp;56.45% <i style="color:green" class="el-icon-caret-bottom" /> </span>
            </template>
            <template slot="footer">
              <span>日销售额 11222</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <!-- 2 -->
        <el-card>
          <Detail count="12356" title="访问量">
            <template slot="charts">
              <LineChart />
            </template>
            <template slot="footer">
              <span>日访问量 11222</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <!-- 3 -->
        <el-card>
          <Detail count="12356" title="支付笔数">
            <template slot="charts">
              <BarChart />
            </template>
            <template slot="footer">
              <span>转化量 65%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <!-- 4 -->
        <el-card>
          <Detail count="12356" title="运营活动效果">
               <template slot="charts">
              <ProgressChart />
            </template>
            <template slot="footer">
              <span>周同比&nbsp;&nbsp;56.45% <i style="color:red" class="el-icon-caret-top" /> </span>
              <span>日同比&nbsp;&nbsp;56.45% <i style="color:green" class="el-icon-caret-bottom" /> </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import Detail from './Detail'
import LineChart from './lineChart'
import BarChart from './barChart'
import ProgressChart from './progressChart'
export default {
  name: 'Card',
  components: {
    Detail,
    LineChart,
    BarChart,
    ProgressChart
  }
}
</script>

<style>
</style>
